<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="填写信息" :autoBack="true"></u-navbar>
		</view>

		<view class="con-body" style="padding-left: 20rpx; padding-right: 20rpx; background-color: #FEFEFE;">
			<!-- 填写信息 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view style="padding-left: 30rpx; padding-right: 30rpx;">
							<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">
								<u-form-item label="服务日期" prop="userInfo.time" labelWidth="70" borderBottom @click="showTime = true">
									<u-input
										disabled
										v-model="model1.userInfo.time"
										placeholder="请选择服务日期"
										border="none"
										disabledColor="#FFFFFF"
										style="background-color: #FFFFFF;"
									></u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>

								<u-form-item
									label="房屋信息"
									prop="userInfo.house"
									labelWidth="70"
									borderBottom
									@click="
										showFloor = true;
										hideKeyboard();
									"
									ref="item1"
								>
									<u-input
										disabled
										v-model="model1.userInfo.house"
										placeholder="请选择房屋信息"
										border="none"
										disabledColor="#FFFFFF"
										style="background-color: #FFFFFF;"
									></u-input>
									<u-icon slot="right" name="arrow-right"></u-icon>
								</u-form-item>

								<u-form-item label="孩子姓名" prop="userInfo.child_name" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.child_name" placeholder="请填写孩子姓名" border="none" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item
									label="孩子年龄"
									prop="userInfo.child_age"
									labelWidth="70"
									borderBottom
									@click="
										ageKeyShow = true;
										hideKeyboard();
									"
								>
									<u-input
										disabled
										v-model="model1.userInfo.child_age"
										placeholder="请填写孩子年龄"
										border="none"
										disabledColor="#FFFFFF"
										style="background-color: #FFFFFF;"
									>
										<template slot="suffix">
											岁
										</template>
									</u-input>
								</u-form-item>

								<u-form-item label="孩子班级" prop="userInfo.child_grade" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.child_grade" placeholder="请填写孩子班级" border="none" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="孩子爱好" prop="userInfo.child_hobby" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.child_hobby" placeholder="请填写孩子爱好" border="none" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="联系人" prop="userInfo.name" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.name" placeholder="请填写联系人" border="none" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item
									label="联系电话"
									prop="userInfo.tel"
									labelWidth="70"
									borderBottom
									@click="
										telKeyShow = true;
										hideKeyboard();
									"
								>
									<u-input
										disabled
										v-model="model1.userInfo.tel"
										placeholder="请填写联系电话"
										border="none"
										disabledColor="#FFFFFF"
										style="background-color: #FFFFFF;"
									></u-input>
								</u-form-item>

								<u-form-item label="临时联系" prop="userInfo.name1" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.name1" placeholder="请填写临时联系人" border="none" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>

								<u-form-item label="临时电话" prop="userInfo.tel1" labelWidth="70" borderBottom>
									<u-input v-model="model1.userInfo.tel1" placeholder="请填写临时电话" border="none" style="background-color: #FFFFFF;"></u-input>
								</u-form-item>
							</u-form>
						</view>
					</view>
				</view>
			</view>

			<u-popup :show="showMemo" mode="center" :round="10" :zoom="false" :closeable="true" :closeOnClickOverlay="false" @close="closepopup" :customStyle="customStyle">
				<view class="p_con">
					<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20220830/46758fcbaf6c731c4060a6b135100f78.jpg"></image>
					<view class="title">温馨提示</view>
					<view class="p_content">{{ memo }}</view>
					<view class="isee" @click="back">正在建设中</view>
				</view>
			</u-popup>
			<!-- <u-modal :show="showMemo" title="温馨提示" :content='memo' @confirm="showMemo = false"></u-modal> -->
			<!-- 下拉工具 -->
			<u-action-sheet :show="showFloor" :actions="actionsFloor" title="请选择受访楼号" @close="showFloor = false" @select="floorSelect"></u-action-sheet>
			<u-calendar :show="showTime" mode="range" @close="showTime = false" :closeOnClickOverlay="true" @confirm="timeSelect"></u-calendar>
			<u-keyboard
				mode="number"
				@confirm="confirmTel"
				@change="valChange"
				@backspace="backspaceTel"
				:dotDisabled="true"
				:show="telKeyShow"
				@cancel="telKeyShow = false"
			></u-keyboard>
			<u-keyboard
				mode="number"
				@confirm="confirmAge"
				@change="ageChange"
				@backspace="backspaceAge"
				:dotDisabled="true"
				:show="ageKeyShow"
				@cancel="ageKeyShow = false"
			></u-keyboard>

			<u-toast ref="uToast" :loading="true"></u-toast>

			<u-modal
				:show="showHouse"
				title="提示"
				content="房屋绑定审核中..."
				:showCancelButton="true"
				confirmText="重新绑定"
				cancelText="等待审核"
				@confirm="bindHouse"
				@cancel="showHouse = false"
			></u-modal>
			<u-button :customStyle="btnStyle" @click="confirmRes">确认提交</u-button>
		</view>
	</view>
</template>

<script>
import { getFloor } from '@/service/userService.js';
import { schoolJoin } from '@/service/shareService.js';
export default {
	data() {
		return {
			btnStyle: {
				width: '94%',
				marginLeft: '3%',
				borderRadius: '40rpx',
				marginTop: '100rpx',
				backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
				backgroundSize: '100% 80rpx',
				color: '#FFFFFF'
			},
			showFloor: false,
			showHouse: false,
			showTime: false,
			telKeyShow: false,
			ageKeyShow: false,
			model1: {
				userInfo: {
					nid: 0,
					time: '',
					house: '',
					child_name: '',
					child_grade: '',
					child_hobby: '',
					child_age: '',
					name: '',
					tel: '',
					name1: '',
					tel1: '',
					start_time: '',
					end_time: ''
				}
			},
			actionsFloor: [],
			actionsTime: Number(new Date()),
			rules: {
				'userInfo.tel': [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				]
			},
			radio: '',
			memo: '',
			switchVal: false,
			showMemo: true,
			customStyle: {
				// width:'300rpx'
			}
		};
	},
	onLoad(options) {
		this.model1.userInfo.nid = options.nid;
		this.memo = options.memo;
		getFloor().then(this.getFloor);
	},
	methods: {
		getFloor(e) {
			if (e.code == 200) {
				this.actionsFloor = e.result;
			} else {
				if (e.msg == '等待审核') {
					this.showHouse = true;
				} else {
					this.$refs.uToast.show({
						type: 'error',
						title: '失败',
						message: e.msg,
						complete() {
							uni.navigateTo({
								url: '/pagesMine/house/index'
							});
						}
					});
				}
			}
		},
		bindHouse() {
			uni.navigateTo({
				url: '/pagesMine/house/index'
			});
		},
		closepopup(){
			uni.navigateBack({
				delta: 1
			});
			this.showMemo=false;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		floorSelect(e) {
			this.model1.userInfo.house = e.name;
		},
		timeSelect(e) {
			this.model1.userInfo.time = e[0] + '~' + e[e.length - 1];
			this.model1.userInfo.start_time = e[0];
			this.model1.userInfo.end_time = e[e.length - 1];
			this.showTime = false;
		},
		// 按键被点击(点击退格键不会触发此事件)
		valChange(val) {
			// 将每次按键的值拼接到value变量中，注意+=写法
			this.model1.userInfo.tel += val;

			this.$refs.form1.validateField('userInfo.tel');
		},
		// 按键被点击(点击退格键不会触发此事件)
		ageChange(val) {
			// 将每次按键的值拼接到value变量中，注意+=写法
			this.model1.userInfo.child_age += val;
		},
		confirmTel() {
			this.telKeyShow = false;
		},
		confirmAge() {
			this.ageKeyShow = false;
		},
		// 退格键被点击
		backspaceTel() {
			// 删除value的最后一个字符
			if (this.model1.userInfo.tel.length) this.model1.userInfo.tel = this.model1.userInfo.tel.substr(0, this.model1.userInfo.tel.length - 1);
		},
		backspaceAge() {
			// 删除value的最后一个字符
			if (this.model1.userInfo.child_age.length) this.model1.userInfo.child_age = this.model1.userInfo.child_age.substr(0, this.model1.userInfo.child_age.length - 1);
		},
		result(time, mode) {
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast;
			switch (mode) {
				case 'datetime':
					return timeFormat(time, 'yyyy-mm-dd hh:MM');
				case 'date':
					return timeFormat(time, 'yyyy-mm-dd');
				case 'year-month':
					return timeFormat(time, 'yyyy-mm');
				case 'time':
					return time;
				default:
					return '';
			}
		},
		confirmRes() {
			let par = this.model1.userInfo;
			schoolJoin(par).then(res => {
				if (res.code == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.msg,
						complete() {
							uni.navigateBack({
								delta: 1
							});
						}
					});
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: res.msg
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.p_con {
	width: 600rpx;
	border-radius: 20rpx;
	overflow: hidden;
	.title {
		padding: 20rpx 0;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.p_content {
		max-height: 350rpx;
		overflow-y: scroll;
		text-indent: 2em;
		white-space: pre-wrap;
		text-spacing: 2rpx;
		color: #555;
		padding: 0rpx 30rpx 20rpx;
	}
	.isee {
		width: 90%;
		margin: 40rpx 0;
		margin-left: 5%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		border-radius: 35rpx;
		// background-color: #333;
		background-size: 100% 80rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
	}
}
</style>
